<!--经济运行-->
<template>
    <div class="leftView">
        <div class="shrink" @click="shows=!shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: row">
                <div style="display: flex;flex-direction: column">
                    <!--建成用地-->
                    <div class="container height295"
                         :style="{'background-image':`url(${require('@/assets/bg_left.png')})`}">
                        <div class="container_title1">
                            <span>建成用地</span>
                        </div>
                        <div class="container_box" ref="yearChart"></div>
                        <div class="container_box2" ref="yearChart2"></div>
                    </div>
                    <!--在园企业-->
                    <div class="container height294"
                         :style="{'background-image':`url(${require('@/assets/bg_left.png')})`}">
                        <div class="container_title1">
                            <span>在园企业</span>
                        </div>
                        <div class="container-garden">
                            <div class="container-garden-pie" ref="yieldChart"></div>
                            <div class="container-garden-totality">
                                <div class="container-garden-totality-barBox">
                                    <span>在园总数</span>
                                    <span>{{ overviewData.inParkCount }}</span>
                                </div>
                                <div class="container-garden-totality-barBox">
                                    <span>入园</span>
                                    <span>{{ overviewData.enterParkCount }}</span>
                                </div>
                                <div class="container-garden-totality-barBox">
                                    <span>离园</span>
                                    <span>{{ overviewData.leaveParkCount }}</span>
                                </div>
                            </div>

                        </div>
                        <div class="container-legend">
                            <div style="display: flex;justify-content: space-between;align-items: center">
                                <div class="container-legend-quadrate" style="background: #02E3FC;"></div>
                                <div class="container-legend-textFont">在园总数</div>
                                <div class="container-legend-numFont">{{ overviewData.inParkCount }}</div>
                            </div>
                            <div style="display: flex;justify-content: space-between;align-items: center">
                                <div class="container-legend-quadrate" style="background-color: #FF832E"></div>
                                <div class="container-legend-textFont">入园</div>
                                <div class="container-legend-numFont">{{ overviewData.enterParkCount }}</div>
                            </div>
                            <div style="display: flex;align-items: center;">
                                <div class="container-legend-quadrate" style="background-color: #FF832E"></div>
                                <div class="container-legend-textFont">离园</div>
                                <div class="container-legend-numFont">{{ overviewData.leaveParkCount }}</div>
                            </div>
                        </div>


                    </div>
                </div>
                <div style="display: flex;flex-direction: column;">
                    <div class="container height273"
                         :style="{'background-image':`url(${require('@/assets/bg_left.png')})`}">
                        <div class="container_title3">
                            <span>企业类别</span>
                        </div>
                        <div class="manufacture-listBox">
                            <div style="display: flex;justify-content: space-between">
                                <div style="display: flex;flex-direction: column;justify-content: space-between">
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                        <div class="circle-gui"></div>
                                        <div class="manufacture-listBox-textFont" style="width: 85%">规上企业数</div>
                                        <div class="manufacture-listBox-numFont">{{ typeData[0] }}</div>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                        <div class="circle-zhong"></div>
                                        <div class="manufacture-listBox-textFont" style="width: 85%">重点用能企业数</div>
                                        <div class="manufacture-listBox-numFont">{{ typeData[1] }}</div>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                        <div class="circle-huan"></div>
                                        <div class="manufacture-listBox-textFont" style="width: 85%">重点环保监控数</div>
                                        <div class="manufacture-listBox-numFont">{{ typeData[2] }}</div>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;justify-content: space-between">
                                <div style="display: flex;flex-direction: column;justify-content: space-between">
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                        <div class="circle-ji"></div>
                                        <div class="manufacture-listBox-textFont" style="width: 85%">计划上市去企业数</div>
                                        <div class="manufacture-listBox-numFont">{{ typeData[3] }}</div>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                        <div class="circle-shang"></div>
                                        <div class="manufacture-listBox-textFont" style="width: 85%">一般企业数</div>
                                        <div class="manufacture-listBox-numFont">{{ typeData[4] }}</div>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                        <div class="circle-an"></div>
                                        <div class="manufacture-listBox-textFont" style="width: 85%">重点安全监管数</div>
                                        <div class="manufacture-listBox-numFont">{{ typeData[5] }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container_barBox2" ref="energyChart"></div>
                    </div>
                    <div class="container height273"
                         :style="{'background-image':`url(${require('@/assets/bg_left.png')})`}">
                        <div class="container_title3">
                            <span>能耗级别</span>
                        </div>
                        <div class="site_barBox" ref="signChart"></div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getBuilt, getOverview, getScale, getType} from "@/api/economy/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            //  在园企业
            overviewData: [],
            //企业类别
            typeData: [],
            shows: true,
            barData1: [
                {name: "规上企业数", num: "127"},
                {name: "重点用能企业数", num: "110"},
                {name: "一般企业数", num: "90"},
            ],
            barData2: [
                {name: "重点安全监管数", num: "70"},
                {name: "重点环保管控数", num: "60"},
                {name: "计划上市企业数", num: "45"},
            ],
            monitorActiveName: 'firstQuarter',
            monitorOptions: [
                {value: 'firstQuarter', label: '第一季度'},
                {value: 'twoQuarter', label: '第二季度'},
                {value: 'thirdQuarter', label: '第三季度'},
                {value: 'fourthQuarter', label: '第四季度'},
            ],
        }
    },
    mounted() {
        //在园企业
        this.getOverview()
        //企业类别
        this.getType()
        //注册企业
        this.getScale()
        //建成用地
        this.getBuilt()
    },
    beforeDestroy() {
    },
    methods: {
        //建成用地
        getBuilt() {//项目跟踪矩阵
            let _this = this
            getBuilt().then((res) => {
                _this.initPie(res.data)
                _this.initPie2(res.data)
            })
        },
        //在园企业
        getOverview() {
            let _this = this
            getOverview().then((res) => {
                console.log(res, "在园企业项目")
                _this.initBar(res.data)
                _this.overviewData = res.data
            })
        },
        //企业类别
        getType() {
            let _this = this
            getType().then((res) => {
                _this.initLine(res.data)
                _this.typeData = Object.values(res.data);
                console.log(res, "企业类别")
            })
        },
        //能耗级别
        getScale() {
            let _this = this
            getScale().then((res) => {
                _this.initSign(res.data)
                console.log(res.data, "能耗级别")
            })
        },
        //企业类别
        initLine(typeData) {
            const myEchart = echarts.init(this.$refs.energyChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            delete typeData.accountingEnterpriseMarket
            const dataArray = Object.values(typeData);
            const maxValue = Math.max(...dataArray);
            console.log(dataArray, '企业类别22');
            console.log(typeData, "企业类别")
            let myColor = ['#4983BC', '#39D34F', '#0CC7E1', '#D2464F', '#D9793B ', '#D6C379'];
            option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                },
                grid: {
                    left: '7%',
                    right: '4%',
                    bottom: '8%',
                    top: '18%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [
                        '规上企业数',
                        '重点用能企业数',
                        '重点环保监控数',
                        '计划上市去企业数',
                        '一般企业数',
                        '重点安全监管数',
                    ],
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.80)",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#00c7ff",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    min: 0,
                    max: maxValue,
                    name: '单位（个）',
                    nameTextStyle: {
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.80)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#063374",
                        }
                    }
                }],
                series: [{
                    name: '进入',
                    type: 'bar',
                    data: dataArray,
                    barWidth: 10, //柱子宽度
                    barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                let num = myColor.length;
                                return myColor[params.dataIndex % num]
                            },
                            opacity: 1,
                        }
                    }
                }]
            };
            myEchart.setOption(option);
        },
        //在园企业
        initBar(overviewData) {
            const myEchart = echarts.init(this.$refs.yieldChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            console.log(overviewData, "在园企业")
            let data = [
                {
                    value: overviewData.inParkCount,
                    name: '在园总数'
                },
                {
                    value: overviewData.leaveParkCount,
                    name: '离园'
                },
                {
                    value: overviewData.enterParkCount,
                    name: '入园'
                },
            ];
            option = {
                tooltip: {
                    trigger: 'item',
                    position: ['50%', '40%'],
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        fontSize: 14,
                        color: '#fff',
                    },
                    formatter: "{b}:({d}%)",
                },
                series: [{
                    name: '人员类型',
                    type: 'pie',
                    radius: ['75%', '87%'],
                    color: ['#FF832E', '#62B7FF', '#39d34f'],
                    labelLine: {
                        normal: {
                            show: false,
                            length: 0,
                            length2: 0,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    label: {
                        normal: {

                            formatter: '',
                            rich: {
                                b: {
                                    fontSize: 10,
                                    color: '#12EABE',
                                    align: 'left',
                                    padding: 4
                                },
                                hr: {
                                    borderColor: '#fff',
                                    width: '100%',
                                    borderWidth: 0,
                                    height: 0
                                },
                                d: {
                                    fontSize: 12,
                                    color: '#fff',
                                    align: 'left',
                                    padding: 4
                                },
                                c: {
                                    fontSize: 16,
                                    color: '#fff',
                                    align: 'left',
                                    padding: 4
                                }
                            }
                        }
                    },
                    data: data
                }]
            };
            myEchart.setOption(option);
        },
        //建成用地
        initPie(datas) {
            const myEchart = echarts.init(this.$refs.yearChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let value1 = datas.plannedArea
            let value2 = datas.builtArea
            let value = [datas.plannedArea,datas.builtArea]
            let percent1 = Math.round(value1 / (value1 + value2) * 100) //规划面积
            let percent2 = Math.round(value2 / (value1 + value2) * 100) //建成面积
            let combinedArray2 =  [percent1,percent2];
            let maxData = 100;
           let formattedValueData = value.map(value => value + '平方公里');
            console.log(datas,'formattedValueData')
            option = {
                xAxis: {
                    max: maxData,
                    splitLine: { show: false },
                    offset: 10,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        splitLine: 'none',
                        axisLine: 'none',
                        axisLabel: {
                            verticalAlign: 'bottom',
                            align: 'left',
                            padding: [0, 0, 20, 15],
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '16',
                            },
                        },
                        data: ['规划面积', '建成面积',],
                    },
                    {
                        axisLine: 'none',
                        data: formattedValueData,
                        axisLabel: {
                            show: true,
                            verticalAlign: 'bottom',
                            align: 'right',
                            padding: [0, 15, 20, 0],
                            textStyle: {
                                color: '#fff',
                                fontSize: '16',
                            }
                        },
                    },
                ],
                grid: {
                    top: 10,
                    height: 150,
                    left: 20,
                    right: 20
                },
                series: [
                    {
                        // current data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                color: {
                                    // type: 'linear',
                                    // x: 0,
                                    // y: 0,
                                    // x2: 0,
                                    // y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#30a7bc', // 0% 处的颜色
                                    },
                                        {
                                            offset: 1,
                                            color: '#4ccaa8', // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                }

                            },
                        },
                        symbol: 'rect',
                        symbolRepeat: 'fixed',
                        symbolMargin: 3,
                        symbolClip: true,
                        symbolSize: [5, 20],
                        symbolBoundingData: maxData,
                        data: combinedArray2,
                        z: 10
                    },
                    {
                        type: 'pictorialBar',
                        itemStyle: {
                            color: '#fff',
                        },
                        label: {
                            show: false,
                            position: 'right',
                            offset: [10, 0],
                            color: 'green',
                            fontSize: 18
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: 3,
                        symbol: 'rect',
                        symbolSize: [5, 20],
                        symbolBoundingData: maxData,
                        data: value,
                        z: 5
                    }
                ]
            };


            myEchart.setOption(option);
        },
        initPie2(datas) {
            const myEchart = echarts.init(this.$refs.yearChart2);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let maxData = 100;
            let value1 = datas.remainArea
            let value2 = datas.totalArea
            let value = [datas.remainArea,datas.totalArea]
            let percent1 = Math.round(value1 / (value1 + value2) * 100) // 剩余用地
            let percent2 = Math.round(value2 / (value1 + value2) * 100) //总用地
            let combinedArray2 = [percent1, percent2];
            let formattedValueData = value.map(value => value + '平方公里');
            option = {
                xAxis: {
                    max: maxData,
                    splitLine: { show: false },
                    offset: 10,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        splitLine: 'none',
                        axisLine: 'none',
                        axisLabel: {
                            verticalAlign: 'bottom',
                            align: 'left',
                            padding: [0, 0, 20, 15],
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '16',
                            },
                        },
                        data: ['剩余用地','总用地',],
                    },
                    {
                        axisLine: 'none',
                        data: formattedValueData,
                        axisLabel: {
                            show: true,
                            verticalAlign: 'bottom',
                            align: 'right',
                            padding: [0, 15, 20, 0],
                            textStyle: {
                                color: '#fff',
                                fontSize: '16',
                            }
                        },
                    },
                ],
                grid: {
                    top: 10,
                    height: 150,
                    left: 20,
                    right: 20
                },
                series: [
                    {
                        // current data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {

                                color: {
                                    // type: 'linear',
                                    // x: 0,
                                    // y: 0,
                                    // x2: 0,
                                    // y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#30a7bc', // 0% 处的颜色
                                    },
                                        {
                                            offset: 1,
                                            color: '#4ccaa8', // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                }

                            },
                        },
                        symbol: 'rect',
                        symbolRepeat: 'fixed',
                        symbolMargin: 3,
                        symbolClip: true,
                        symbolSize: [5, 20],
                        symbolBoundingData: maxData,
                        data: combinedArray2,
                        z: 10
                    },
                    {
                        type: 'pictorialBar',
                        itemStyle: {
                            color: '#fff',
                        },
                        label: {
                            show: false,
                            position: 'right',
                            offset: [10, 0],
                            color: 'green',
                            fontSize: 18
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: 3,
                        symbol: 'rect',
                        symbolSize: [5, 20],
                        symbolBoundingData: maxData,
                        data: value,
                        z: 5
                    }
                ]
            };
            myEchart.setOption(option);
        },
        //能耗级别
        initSign(signData) {
            const myEchart = echarts.init(this.$refs.signChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            const numericValues = Object.values(signData);
            let data = [
                {
                    value: numericValues[0],
                    name: '500万以下'
                },
                {
                    value: numericValues[1],
                    name: '500-100万'
                },
                {
                    value: numericValues[2],
                    name: '3000-5000万'
                },
                {
                    value: numericValues[3],
                    name: '1000-3000万'
                },
                {
                    value: numericValues[4],
                    name: '5000万以上'
                },

            ]
            let datas = [
                {
                    value: numericValues[0],
                    name: ''
                },
                {
                    value: numericValues[1],
                    name: ''
                },
                {
                    value: numericValues[2],
                    name: ''
                },
                {
                    value: numericValues[3],
                    name: ''
                },
                {
                    value: numericValues[4],
                    name: ''
                },

            ]
            let color = ['#02E3FC', '#FF832E', '#62B7FF', '#39d34f', '#d6c379']
            console.log(signData, '注册企业2')
            option = {
                title: {
                    text: '单位：企业数',
                    y: '5%',
                    textAlign: 'left',
                    textStyle: {
                        color: '#fff',
                        fontSize:13,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    position: ['30%', '40%'],
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: "{b}: ({d}%)",
                },
                legend: {
                    show: true,
                    // orient: 'vertical', // 设置图例竖向排列
                    y: '60%',
                    itemWidth: 8,
                    itemHeight: 8,
                    itemGap: 10,
                    data: ['500-100万', '500万以下', '1000-3000万', '3000-5000万', '5000万以上'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    formatter: function (name) {
                        const dataIndex = ['500-100万', '500万以下', '1000-3000万', '3000-5000万', '5000万以上'].indexOf(name);
                        return name + ' ' + numericValues[dataIndex] + '个'; // Change this line according to your data structure
                    },
                    rich: {
                        a: {
                            color: function(params) {
                                return color[params.dataIndex];
                            },
                            fontSize: 16
                        },
                        b: {
                            color: function(params) {
                                return color[params.dataIndex];
                            },
                            fontSize: 16
                        }
                    }
                },
                series: [{
                    name: '人员类型',
                    type: 'pie',
                    hoverAnimation: false,
                    legendHoverLink: false,
                    center: ['50%', '35%'],
                    radius: ['40%', '60%'],
                    color: ['rgba(2, 227, 252, 0.6)', 'rgba(255, 131, 46, 0.6)', 'rgba(98, 183, 255, 0.6)', 'rgba(57, 211, 79,0.6)', 'rgba(214, 195, 121,0.6)'],
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },
                    },
                    tooltip: {
                        show: false,
                    },

                    data: datas
                },
                    {
                        name: '人员类型',
                        type: 'pie',
                        center: ['50%', '35%'],
                        radius: ['60%', '65%'],
                        color: ['#02E3FC', '#FF832E', '#62B7FF', '#39d34f', '#d6c379'],
                        labelLine: {
                            normal: {
                                show: true,
                                length: 20,
                                length2: 20,
                                lineStyle: {
                                    width: 2
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                formatter: '{c|{c}}\n{hr|}\n{b|{b}}',
                                rich: {
                                    b: {
                                        fontSize: 14,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    hr: {
                                        borderColor: '#fff',
                                        width: '100%',
                                        borderWidth: 2,
                                        height: 0
                                    },
                                    d: {
                                        fontSize: 14,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    }
                                }
                            }
                        },
                        itemStyle: { // 此配置
                            normal: {
                                borderWidth: 3,
                                borderColor: 'rgba(49, 69, 99,0.4)',
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 2,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: data
                    }
                ]
            };
            myEchart.setOption(option);
        },
        //工业产值
        initOutput() {
            const myEchart = echarts.init(this.$refs.outputChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c}",

                },

                legend: {
                    show: true,
                    orient: 'vertical', // 设置图例竖向排列
                    y: '75%',
                    itemWidth: 8,
                    itemHeight: 8,
                    itemGap: 10,
                    data: ['500万以下企业数', '500-100万企业数', '1000万以上企业数'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                series: [{
                    name: '人员类型',
                    type: 'pie',
                    hoverAnimation: false,
                    legendHoverLink: false,
                    center: ['50%', '30%'],
                    radius: ['28%', '35%'],
                    color: ['rgba(2, 227, 252, 0.6)', 'rgba(255, 131, 46, 0.6)', 'rgba(98, 183, 255, 0.6)'],
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },

                    },
                    tooltip: {
                        show: false,


                    },

                    data: [{
                        value: 100,
                        name: ''
                    },
                        {
                            value: 100,
                            name: ''
                        },
                        {
                            value: 100,
                            name: ''
                        },

                    ]
                },
                    {
                        name: '人员类型',
                        type: 'pie',
                        center: ['50%', '30%'],
                        radius: ['33%', '45%'],
                        color: ['#02E3FC', '#FF832E', '#62B7FF'],
                        labelLine: {
                            normal: {
                                show: true,
                                length: 20,
                                length2: 20,
                                lineStyle: {
                                    width: 2
                                }
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c|{c}}\n{hr|}\n{b|{b}}',
                                rich: {
                                    b: {
                                        fontSize: 12,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    hr: {
                                        borderColor: '#fff',
                                        width: '100%',
                                        borderWidth: 2,
                                        height: 0
                                    },
                                    d: {
                                        fontSize: 12,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    c: {
                                        fontSize: 12,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    }
                                }
                            }
                        },
                        data: [{
                            value: 100,
                            name: '500万以下企业数'
                        },
                            {
                                value: 100,
                                name: '500-100万企业数'
                            },
                            {
                                value: 100,
                                name: '1000万以上企业数'
                            },

                        ]
                    }
                ]
            };
            myEchart.setOption(option);
        },

    }
}
</script>


<style lang="scss">
.height230 {
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.select {
  width: 180px;
  height: 20px;
  border: 1px solid #62B7FF;
  border-radius: 5px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height230 {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
  .select {
    height: calHeight_2k(20px);
  }

}
</style>
<style lang="scss" scoped>
.minHeight12 {
  min-height: 12px;
  margin-bottom: 5px;
}

.height294 {
  width: 296px;
  height: 300px;
}

.height295 {
  width: 296px;
  height: 300px;
}

.height273 {
  width: 296px;
  height: 300px;
}


.leftView {
  float: left;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  height: 630px;
  align-items: center;
  position: relative;
  z-index: 3;
  cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    background-size: 100% 100%;

    display: flex;
    flex-direction: column;


    &_barBox2 {
      width: 250px;
      height: 180px;
      margin-left: 22px;
    }

    &-titleBgc {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &-garden {
      width: 253px;
      height: 122px;
      margin-left: 22px;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-pie {
        width: 120px;
        height: 120px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_pie.png");
      }

      &-totality {
        width: 120px;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &-barBox {
          width: 80px;
          height: 21px;
          text-align: center;
          background-size: 100% 100%;
          background-image: url("@/assets/bgc_pie1.png");
          display: flex;
          justify-content: space-between;
          padding: 0 20px;
          align-items: center;

          span:nth-child(1) {
            font-size: 12px;
            font-family: Noto Sans SC-Regular, Noto Sans SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
          }

          span:nth-child(2) {
            font-size: 16px;
            font-family: D-DIN-DIN-Bold, D-DIN-DIN;
            font-weight: bold;
            line-height: 22px;
            background: linear-gradient(180deg, #FFFFFF 19%, #00E6FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-left: 4px;
          }
        }
      }

    }

    &-legend {
      width: 233px;
      height: 21px;
      margin-left: 32px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      &-quadrate {
        width: 8px;
        height: 8px;
      }

      &-textFont {
        font-size: 12px;
        font-family: Noto Sans SC-Regular, Noto Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0 5px;
      }

      &-numFont {
        font-size: 16px;
        font-family: D-DIN-DIN-Bold, D-DIN-DIN;
        font-weight: bold;
        line-height: 22px;
        background: linear-gradient(180deg, #FFFFFF 19%, #23A5F7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_box {
      width: 270px;
      height: 90px;
      margin-top: 10px;
      margin-left: 12px;
      position: relative;
    }

    &_box2 {
      width: 270px;
      height: 90px;
      margin-top: 30px;
      margin-left: 12px;
      position: relative;
    }

    &-numBox {
      width: 180px;
      height: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bgc_pie1.png");
      text-align: center;
      line-height: 32px;
      position: absolute;
      bottom: 26%;
      left: 21%;
      z-index: 99;

      span:nth-child(1) {
        font-size: 14px;
        font-family: Noto Sans SC-Regular, Noto Sans SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
      }

      span:nth-child(2) {
        font-size: 19px;
        font-family: D-DIN-DIN-Bold, D-DIN-DIN;
        font-weight: bold;
        line-height: 22px;
        background: linear-gradient(180deg, #FFFFFF 19%, #00E6FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 4px;
      }
    }

    &_title1 {
      width: 245px;
      height: 36px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");

      span {
        height: 36px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 36px;
          margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title3 {
      width: 245px;
      height: 36px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");
      span {
        height: 36px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 36px;
          margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_policy {
      width: 222px;
      height: 52px;
      padding-left: 10px;
      margin-top: 8px;
      margin-left: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_policy.png");

      &_name {
        height: 15px;
        font-size: 9px;
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /*超出部分省略号表示*/
        white-space: nowrap; /*强制单行显示*/
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1CFDFF;
        line-height: 15px;
      }

      &_types {
        display: flex;;
        flex-direction: row;
        min-height: 12px;
      }

      &_type {
        margin-bottom: 5px;
        width: 48px;
        display: block;
        height: 12px;
        margin-right: 5px;
        font-size: 7px;
        text-align: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 12px;
      }

      &_bg1 {
        background: linear-gradient(270deg, rgba(226, 80, 63), rgba(231, 10, 91));
      }

      &_num {
        height: 6px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 6px;
      }
    }
  }

  .energy {
    width: 296px !important;
    height: 314px !important;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    &-titleBgc {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_barBox {
      width: 322px;
      height: 266px;

    }

    &_bgPie {
      width: 135px;
      height: 135px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_pie.png");
      position: absolute;
      top: 18%;
      left: 20.8%;

    }
  }

  .manufacture {
    width: 274px !important;
    height: 294px !important;
    background-size: 100% 100%;
    display: flex;
    padding-left: 22px;
    flex-direction: column;

    &-titleBgc {
      width: 250px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
      margin-left: 22px;
    }

    &-lineBox {
      width: 334px;
      height: 214px;
      margin-top: 10px;
    }

    &_barBox {
      width: 250px;
      height: 266px;
      margin-left: 22px;
    }

    &_barBox2 {
      width: 250px;
      height: 170px;
      margin-left: 22px;
    }

    &-listBox {
      width: 250px;
      height: 60px;
      margin-left: 22px;
      margin-top: 5px;
      display: flex;
      justify-content: space-between;

      &-textFont {
        font-size: 12px;
        font-family: Noto Sans SC-Regular, Noto Sans SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        margin: 0 5px;
      }

      &-numFont {
        font-size: 12px;
        font-family: D-DIN-DIN-Bold, D-DIN-DIN;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }

  .site {
    width: 274px !important;
    height: 294px !important;
    background-size: 100% 100%;
    display: flex;
    padding-left: 22px;
    flex-direction: column;

    &_titleBgc {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_barBox {
      width: 250px;
      height: 350px !important;
      margin-left: 22px;
    }
  }
}

.industrialChainStyle {
  margin-left: 5%;
  width: 90%;
  height: 240px;
}

.industryStyle {
  width: 100%;
  height: 224px;
}

.circle-gui {
  width: 6px;
  height: 6px;
  background: #4983BC;
  border-radius: 4px;
}

.circle-zhong {
  width: 6px;
  height: 6px;
  background: #39D34F;
  border-radius: 4px;
}

.circle-shang {
  width: 6px !important;
  height: 6px !important;
  background: #D9793B;
  border-radius: 4px;
}

.circle-an {
  width: 6px;
  height: 6px;
  background: #D6C379;
  border-radius: 4px;
}

.circle-huan {
  width: 6px;
  height: 6px;
  background: #0CC7E1;
  border-radius: 4px;
}

.circle-ji {
  width: 6px;
  height: 6px;
  background: #D2464F;
  border-radius: 4px;
}


@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .minHeight12 {
    min-height: calHeight_2k(12px);
    margin-bottom: calHeight_2k(5px);
  }

  .height294 {
    height: calHeight_2k(300px);
  }
  .height295 {
    height: calHeight_2k(300px);
  }

  .height273 {
    height: calHeight_2k(300px);
  }


  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &_box {
        height: calHeight_2k(90px);
        margin-top: calHeight_2k(10px);
      }

      &_box2 {
        height: calHeight_2k(90px);
        margin-top: calHeight_2k(30px);
      }

      &-numBox {
        height: calHeight_2k(22px);
        line-height: calHeight_2k(32px);

        span:nth-child(2) {

          line-height: calHeight_2k(22px);

        }
      }

      &_barBox {
        height: calHeight_2k(255px);
      }

      &_barBox2 {
        height: calHeight_2k(170px);
      }

      &-garden {
        height: calHeight_2k(122px);
        margin-top: calHeight_2k(40px);

        &-totality {
          height: calHeight_2k(80px);

          &-barBox {
            height: calHeight_2k(21px);
          }
        }
      }

      &-legend {
        height: calHeight_2k(21px);
        margin-top: calHeight_2k(20px);

        &-quadrate {
          height: calHeight_2k(8px);

          &-numFont {
            line-height: calHeight_2k(22px);
          }
        }
      }
    }

    .energy {
      height: calHeight_2k(314px) !important;

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &_barBox {
        height: calHeight_2k(246px);
      }

      &_bgPie {
        //height: calHeight_2k(135px);
      }
    }

    .manufacture {
      height: calHeight_2k(294px) !important;

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &-lineBox {
        height: calHeight_2k(214px);
        margin-top: calHeight_2k(10px);
      }

      &_barBox {
        height: calHeight_2k(266px);
      }
    }

    .site {
      height: calHeight_2k(294px) !important;

      &_titleBgc {
        height: calHeight_2k(3px);
      }

      &_barBox {
        height: calHeight_2k(350px) !important;
      }

      &_title1 {
        height: calHeight_2k(36px);
        margin-top: calHeight_2k(10px);

        span {
          height: calHeight_2k(36px);
          line-height: calHeight_2k(36px);
        }

      }

      &_title3 {
        height: calHeight_2k(36px);
        margin-top: calHeight_2k(20px);

        span {
          height: calHeight_2k(36px);
          line-height: calHeight_2k(36px);
        }

      }

      &_policy {
        height: calHeight_2k(52px);
        margin-top: calHeight_2k(8px);

        &_name {
          height: calHeight_2k(15px);
          line-height: calHeight_2k(15px);
        }

        &_types {
          min-height: calHeight_2k(12px);
        }

        &_type {
          width: calHeight_2k(48px);
          margin-bottom: calHeight_2k(5px);
          height: calHeight_2k(12px);
          line-height: calHeight_2k(12px);
        }

        &_bg1 {
        }

        &_num {
          height: calHeight_2k(6px);
          line-height: calHeight_2k(6px);
        }
      }
    }

    .industrialChainStyle {
      height: calHeight_2k(240px);
    }

    .industryStyle {
      height: calHeight_2k(224px);
    }

  }
}


.userFlex {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
